<template>
	<view class="container">
		<scroll-view class="tabs-title" scroll-x>
			<view :class="active === index ? 'active' : '' "v-for="(item,index) in tabList" :key="index" @click="ontabtap(index)">{{item.name}}</view>
	    </scroll-view>
		<scroll-view>
			  <view class="newslist" v-for="(item, index) in news" :key="index">
			    <newss :item="item" @click="tapToDetail(item.id)"></newss>
			  </view>
		</scroll-view>
	</view>
	
</template>

<script>
	import newss from '../../components/newss.vue'
	import {friendlyDate} from '../../common/util.js'
	export default {
		data() {
			return {
				active: 0,
				tabList: [{
					id: "tab01",
					name:'推荐'
				},{
		          id: "tab02",
		          name: '要闻'
		        },
		        {
		          id: "tab03",
		          name: '新思想'
		        },
		        {
		          id: "tab04",
		          name: '广东'
		        },
		        {
		          id: "tab05",
		          name: '综合'
		        },{
		          id: "tab02",
		          name: '要闻'
		        },
		        {
		          id: "tab03",
		          name: '新思想'
		        },
		        {
		          id: "tab04",
		          name: '广东'
		        },
		        {
		          id: "tab05",
		          name: '综合'
		        },
		        {
		          id: "tab06",
		          name: '科技'
		        },
		        {
		          id: "tab07",
		          name: '军事'
		        },
		        {
		          id: "tab08",
		          name: '体育'
		        },
		        {
		          id: "tab09",
		          name: '文化'
		        },
		        {
		          id: "tab10",
		          name: '旅游'
		        },
		        {
		          id: "tab11",
		          name: '国际'
		        }],
				news: [],
			}
		},
		methods: {
			ontabtap(index) {
			    this.active = index
				this.requestNewsList()
			},
			tapToDetail(id) {
				// if (this._iswidescreen) {
				// 	uni.$emit('updateDetail', {
				// 		detail: id
				// 	})
				// } else {
				    uni.navigateTo({
				        url:`/pages/news/detail?id=${id}`
				    })
				// }
			},
			async requestNewsList() {
				const res = await this.$myRequest({
					url: "/news",
					method:'POST',				
					data: {
						type: this.active,
					}
				})
				console.log(res)
				for (var index in res.data) {
					res.data[index].datetime = friendlyDate(new Date(res.data[index].datetime))
				}
				this.news = res.data
			}
		},
		components: {
			'newss':newss
		},
		onLoad() {
			// 这行代码创建了一个媒体查询观察者实例 mediaQueryOb，用于监听屏幕宽度的变化。this 指的是当前页面的Vue实例。
			var mediaQueryOb = uni.createMediaQueryObserver(this)
			mediaQueryOb.observe({
				minWidth: 768
			}, matches => {
				this._iswidescreen = matches;
			})
			// if (this._iswidescreen) {
			// 	uni.hideTabBar({}) //如果_isiswidescreen为true 隐藏tabBar。
			// }
			this.requestNewsList()
		}
		
	}
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column; /* 改为垂直布局 */
}
.tabs-title {
  width: 100%; /* 宽度占满 */
  height: 80rpx; /* 适当的高度 */
  background-color: #ffffff;
  box-sizing: border-box;
  white-space: nowrap; /* 禁止换行 */
  display: flex; /* 启用flex布局 */
  flex-direction: row; /* 横向排列 */
  
  view {
    display: inline-flex;
    align-items: center;
    padding: 0 30rpx; /* 左右间距 */
    font-size: 28rpx;
    color: #333;
    height: 100%; /* 和父级同高 */
    position: relative;
    flex-shrink: 0; /* 禁止压缩 */
    
    &.active {
      color: #aa0000;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 6rpx;
        background-color: #aa0000;
      }
    }
  }
}

/* 移动端优化 */
@media (max-width: 768px) {
  .tabs-title {
    height: 70rpx;
    view {
      font-size: 24rpx;
      padding: 0 20rpx;
    }
  }
}
.newslist {
  display: flex;
  flex-wrap: wrap;
}
</style>